<template>
    <fieldset>
        <legend>自定义指令</legend>
        <input type="text" v-has>
        <ul>
            <!-- vue3里面对于循环批量创建的元素推荐绑定函数的写法,提高性能 -->
            <li v-for="item in arr" :ref="refss">
                <b v-for="k in item" ref="b">{{ k }}</b>
            </li>
        </ul>
    </fieldset>
</template>
<script>
export default {
    methods: {
        refss(input) {
            console.log(input)
        }
    },
    data() {
        return {
            msg: "red",
            arr: [
                {
                    id: 1,
                    name: '李雷1',
                    age: 30
                },
                {
                    id: 2,
                    name: '李雷2',
                    age: 20
                },
                {
                    id: 3,
                    name: '李雷3',
                    age: 40
                },
            ]
        }
    },
    mounted() {
        console.log(this.$refs)
    },
    directives: {
        has: {
            created(el, binding) {
                console.log(el)
                console.log(binding)
            },
            mounted(el) {
                el.focus()
            }
        }
    }
}
</script>
<style scoped>
:global(legend) {
    color: hotpink
}
</style>